<template>
    <div class="nav-box">
        <div class="header black-bg">
            <div class="w1200">
                <a href="" class='company-logo fl'></a>
                <div class="fl teacher-center">代理商系统</div>
                <div class="message fr">
                    <ul class="fr clearfix msgCenter">
                        <li class=" headPic">
                            <div class="userhead fl"><img :src="icon" :alt="username"/></div>
                            <span class='fl userName'>{{username}}</span>
                            <div class="userInfo">
                                <span class='arrow'></span>
                                <ul>
                                    <li><a @click="loginOut" class="a04">退出</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        font-weight: normal;
        outline-style: none;
        text-decoration: none;
        font-size: 14px;
        color: #2a2a2a;
        font-style: normal;
        font-family: '微软雅黑';
    }

    .w1200 {
        width: 1200px;
        margin: 0 auto;
    }

    .fr {
        float: right;
    }

    .fl {
        float: left;
    }

    .clearfix:after {
        content: '';
        height: 0;
        line-height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }

    input {
        border: none;
        background-color: #fff;
    }

    .nav-box .buying {
        display: block;
        width: 25px;
        height: 23px;
        /*background: url(../assets/images/public/icon_07.png);*/
        margin-top: 7px;
        margin-right: 15px;
    }

    .header.black-bg {
        background-color: #000;
    }

    .nav-box {
        height: 75px;
        width: 100%;
        margin-bottom: 25px;
    }

    .nav-box .header {
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        padding-top: 20px;
        box-sizing: border-box;
        height: 75px;
        z-index: 1000;
    }

    .nav-box .header.black-bg {
        background-color: #000;
    }

    .nav-box .company-logo {
        width: 150px;
        height: 35px;
        /*background-image: url(../assets/images/public/toplogo.png);*/
        text-indent: -999999px;
        overflow: hidden;
        margin-right: 80px;
    }

    .msgCenter {
        margin-left: 15px;
    }

    .msgCenter > li {
        float: left;
        position: relative;
    }

    .nav-box .num {
        position: absolute;
        left: -6px;
        top: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #e70012;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 16px;
        font-family: 'SimSun';
    }

    .nav-box .msn {
        display: block;
        width: 21px;
        height: 20px;
        /*background: url(../assets/images/public/icon_06.png);*/
        margin-top: 7px;
        margin-right: 24px;
    }

    .nav-box .headPic {
        position: relative;
        cursor: pointer;
        height: 50px;
        margin-top: 4px;
    }

    .nav-box .userhead {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
    }

    .nav-box .userhead img {
        max-width: 100%;
    }

    .nav-box .userName {
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
        line-height: 30px;
    }

    .nav-box .userInfo {
        position: absolute;
        left: -56px;
        top: 50px;
        opacity: 0;
        transition: all 0.5s;
        visibility: hidden;
        z-index: 22;
    }

    .nav-box .userInfo .arrow {
        /*background: url(../assets/images/public/redarrow.png);*/
        width: 15px;
        height: 11px;
        top: -11px;
        left: 50%;
        margin-left: -7.5px;
        position: absolute;
    }

    .nav-box .userInfo li {
        width: 140px;
        height: 24px;
        border-bottom: 1px solid #f2f2f2;
    }

    .nav-box .userInfo li a.active {
        background-position: 22px -16px !important;
        color: #e70012;
    }

    /*.nav-box .userInfo li a.a01 {*/
    /*background: #fff url(../assets/images/public/icon_01.png) no-repeat 22px 5px;*/
    /*}*/

    /*.nav-box .userInfo li a.a02 {*/
    /*background: #fff url(../assets/images/public/icon_02.png) no-repeat 22px 5px;*/
    /*}*/

    /*.nav-box .userInfo li a.a03 {*/
    /*background: #fff url(../assets/images/public/icon_03.png) no-repeat 22px 5px;*/
    /*}*/

    /*.nav-box .userInfo li a.a05 {*/
    /*background: #fff url(../assets/images/public/icon_09.png) no-repeat 22px 5px;*/
    /*}*/

    /*.nav-box .userInfo li a.a04 {*/
    /*background: #fff url(../assets/images/public/icon_04.png) no-repeat 22px 5px;*/
    /*}*/

    /*.nav-box .userInfo li:hover a.a01 {*/
    /*background: #fff url(../assets/images/public/icon_01.png) no-repeat 22px -16px;*/
    /*}*/

    /*.nav-box .userInfo li:hover a.a02 {*/
    /*background: #fff url(../assets/images/public/icon_02.png) no-repeat 22px -16px;*/
    /*}*/

    /*.nav-box .userInfo li:hover a.a03 {*/
    /*background: #fff url(../assets/images/public/icon_03.png) no-repeat 22px -16px;*/
    /*}*/

    /*.nav-box .userInfo li:hover a.a05 {*/
    /*background: #fff url(../assets/images/public/icon_09.png) no-repeat 22px -16px;*/
    /*}*/

    /*.nav-box .userInfo li:hover a.a04 {*/
    /*background: #fff url(../assets/images/public/icon_04.png) no-repeat 22px 5px;*/
    /*}*/

    .nav-box .userInfo li:last-child {
        border: none;
    }

    .nav-box .userInfo li a {
        padding-left: 50px;
        display: block;
        width: 100%;
        height: 100%;
        line-height: 24px;
        font-size: 14px;
        color: #636363;
        box-sizing: border-box;
        text-align: left;
    }

    .nav-box .userInfo li:hover a {
        color: #e70012;
    }

    .nav-box .headPic:hover .userInfo {
        opacity: 1;
        visibility: visible;
    }

    .nav-box .userInfo {
        position: absolute;
        left: -56px;
        top: 50px;
        opacity: 0;
        transition: all 0.5s;
        visibility: hidden;
        z-index: 22;
    }

    .loggingBtn a {
        display: block;
        float: left;
        color: #fff;
        font-size: 14px;
        margin-left: 15px;
        line-height: 33px;
    }

    .teacher-center {
        font-size: 18px;
        color: #fff;
        line-height: 34px;
        margin-left: -30px;
    }
</style>


<script>
    import Request from "@/mixins/Request";

    export default {
        name: 'c-header',
        data() {
            return {
                auto_request: false,
                user_info: {
                    username: '小黄',
                    icon: 'http://thirdwx.qlogo.cn/mmopen/vi_32/x7dO3qq2JzVxwx011En6NjWJ2bibhgWXyl4Qpa6xcdDqicQmmc94b1YzqBib2q1ickZa8tiaKVnZB5yB7e4wgwG3xtg/132',
                }
            };
        },
        mixins: [
            Request
        ],
        computed: {
            username() {
                return this.user_info.username;
            },
            icon() {
                return this.user_info.icon;
            },
        },
        methods: {
            loginOut() {
                this.get('loginOut').then(res => {
                    this.$router.push({path: '/login'});
                });
            }
        },
        mounted() {
            // this.get('getHeadInfo').then(res => {
            //     this.user_info = res.data;
            // })
        }
    }
</script>